<!--
 * @Author: wangming
 * @Date: 2021-03-30 15:48:45
 * @LastEditors: your name
 * @LastEditTime: 2021-10-15 15:05:51
 * @Description: file content
-->
<route>
{
  "meta":{
    "title":"菜单设置",
    "showMenu":true,
    "serialNum": 20
  }
}
</route>
<template>
  <div>
    <el-row :gutter="12" type="flex" align="middle">
      <el-col :span="12">
        <el-button type="primary" @click="handleCreate">新建</el-button>
      </el-col>
      <el-col :span="12" class="tr">
        <el-select
          v-model="pageType"
          clearable
          placeholder="请选择"
          @clear="parseData"
          @change="parseData"
        >
          <el-option
            v-for="item in options"
            :key="item.pageType"
            :label="item.label"
            :value="item.pageType"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-table
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      row-key="id"
      default-expand-all
      stripe
      border
    >
      <el-table-column prop="name" label="菜单名称">
        <template slot-scope="scope">
          <span v-if="scope.row.icon">
            <IconPark
              v-if="scope.row.type === 'SUB' && scope.row.pageType === 'APP'"
              style="
                font-size: 20px;
                vertical-align: middle;
                margin-right: 10px;
              "
              :type="scope.row.icon"
            />
            <i
              v-else
              style="
                font-size: 20px;
                vertical-align: middle;
                margin-right: 10px;
              "
              :class="scope.row.icon"
            />
          </span>
          <span style="position: relative; top: 2px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="菜单类型">
        <template slot-scope="scope">
          {{ scope.row.type | menuType }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="来源">
        <template slot-scope="scope">
          {{ scope.row.pathName ? "系统内置" : "自定义菜单" }}
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="icon" />
      <el-table-column prop="pageName" label="页面名称">
        <template slot-scope="scope">
          <i
            style="font-size: 14px"
            v-if="scope.row.pageType === 'ALL'"
            class="el-icon-monitor mr5"
          ></i>
          <i
            style="font-size: 14px"
            v-if="scope.row.pageType === 'APP'"
            class="el-icon-mobile-phone mr5"
          ></i>
          {{ scope.row.pageName }}
        </template>
      </el-table-column>
      <el-table-column prop="serialNum" label="排序" />
      <el-table-column prop="actions" label="操作">
        <template slot-scope="scope">
          <span class="table-actionItem"
            ><el-button type="text" @click="handleEdit(scope.row)"
              >编辑</el-button
            ></span
          >
          <template v-if="!scope.row.pathName">
            <span
              class="table-actionItem"
              v-if="!scope.row.children || scope.row.children.length === 0"
            >
              <el-popconfirm
                title="确定要删除该菜单吗？"
                placement="top"
                @confirm="handleDelete(scope.row)"
              >
                <el-button class="link-danger" type="text" slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </span>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <menu-form
      ref="menuForm"
      :menu-list="menuList"
      :treeData="tableData"
      @ok="loadData"
    />
  </div>
</template>

<script>
import { MODULE_TYPE_ENUM } from "@/utils/enum";
import MenuForm from "./__components__/MenuForm";
import { getHmmenuList,deleteHmmenu } from '@/apis/paas/HmMenuController.js'
import { arrayToTree } from "@/utils/util";
import { IconPark } from "@icon-park/vue/es/all";

export default {
  name: "MenuSetting",
  components: { MenuForm, IconPark },
  data() {
    return {
      loading: false,
      MODULE_TYPE_ENUM,
      menuList: [], // 记录菜单的array
      tableData: [],
      options: [
        {
          pageType: "APP",
          label: "APP",
        },
        {
          pageType: "ALL",
          label: "PC",
        },
        {
          pageType: "",
          label: "全部",
        },
      ],
      pageType: "",
      data: [], // 原始菜单数据
    };
  },

  created() {
    this.loadData();
  },

  methods: {
    loadData(pageType) {
      // { pageType: this.pageType }
      getHmmenuList().then((data) => {
        this.data = data;
        this.parseData();
      });
    },

    //     handleTypeChange(){
    // this.parseData()
    //     },

    /**
     * 数据过滤
     */
    parseData() {
      if (!this.pageType) {
        this.tableData = arrayToTree(this.data, null);
        return;
      }

      // 1.过滤子菜单类型

      const typeRange = this.pageType === "APP" ? ["APP"] : ["ALL", null];
      const typeList = this.data.filter(
        (item) =>
          (item.type === "SUB" && typeRange.includes(item.pageType)) ||
          item.type === "TOP"
      );
      // console.log(typeList);
      // 2.转换成树
      const menuTree = arrayToTree(typeList, null);
      // console.log(menuTree);

      // 3.去除没有子菜单的父菜单
      const resultTree = menuTree.filter(
        (item) => item.children && item.children.length > 0
      );
      this.tableData = resultTree;
    },
    handleCreate() {
      this.$refs.menuForm.addForm();
    },

    handleEdit(record) {
      this.$refs.menuForm.editForm({
        ...record,
      });
    },

    handleDelete(record) {
      deleteHmmenu([record.id]).then((res) => {
        this.loadData();
        this.$message.success("操作成功");
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
